<template>
  <div class="container integralMall">
    <!-- <van-tabs :active="active" @change="onChange">
      <van-tab title="商品">
        <ant-store-product v-for="(item,index)  in collectsList.goodsCollects" :key="index" :data="item"></ant-store-product>
      </van-tab>
      <van-tab title="店铺">
        <ant-store v-for="(item,index)  in collectsList.SToreCollects" :key="index" :data="item"></ant-store>
      </van-tab>
    </van-tabs> -->

    <div class="integralMall-banner">
      <img src="../../../static/images/integralMall-banner.png" mode="widthFix" alt="">
    </div>
    <div class="integralMall-info">
      <div class="integralMall-integral">
        <img class="integralMall-integral-icon" src="../../../static/images/icon-integralMall.png" alt="">
        <div class="integralMall-integral-details">
          <div class="integralMall-integral-num">
            <span v-if="data">{{data.myPoints}}</span> 积分</div>
          <div class="integralMall-integral-init">积分记录</div>
        </div>
      </div>
      <div class="integralMall-record" @click="$router.push({ path: '/pages/exchangeRecord/exchangeRecord'})">
        <img src="../../../static/images/icon-duihuanjilu.png" alt="">
        <span>兑换记录</span>
      </div>
    </div>
    <div class="integralMall-list" v-if="list">
      <ant-integral-product v-for="(item,index) in list" :key="index" :data="item"></ant-integral-product>
    </div>
    <i-load-more v-if="!list&&isLoadEnd" :tip="'暂无数据'" :loading="loading" />
    <i-load-more v-if="!isLoadEnd" :tip="'加载更多数据'" :loading="loading" />
    <i-load-more v-if="list&&isLoadEnd" :tip="'没有更多数据了'" :loading="loading" />
    <i-toast id="toast" />
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  const {
    $Toast
  } = require("@/../static/iview/base/index");
  import AntIntegralProduct from '@/components/integralProduct'
  import request from "@/api/request";
  import {
    getCollects,
    cancelCollect
  } from '@/utils/index'
  export default {
    components: {
      AntIntegralProduct
    },
    data() {
      return {
        data: null,
        list: null,
        page: 1,
        isLoadEnd: false
      };
    },
    computed: {
      ...mapState(['userInfo']),
    },
    methods: {
      getPointsGoodsLists() {
        request.getPointsGoodsLists({
          page: this.page,
        }).then(res => {
          if (res.data.list.length < 20) {
            this.isLoadEnd = true
          }
          if (this.list) {
            this.list = this.list.concat(res.data.list)
          } else {
            this.list = res.data.list
          }
          this.data = res.data
        })
      },
      onChange(e) {
        console.log(e.mp.detail.index)
        this.active = e.mp.detail.index
        this.isLoadEnd = false

        // this.active = val
      },
    },
    onReachBottom() {
      this.page++;
      this.getPointsGoodsLists();
    },
    mounted() {
      this.data = null
      this.getPointsGoodsLists();
    }
  };

</script>

<style lang="less">
  .integralMall-banner {
    width: 100%;

    img {
      width: 100%;
      height: auto;
    }
  }

  .integralMall-info {
    background: #fff;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .integralMall-integral {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .integralMall-integral-icon {
      width: 26px;
      height: 34px;
      display: block;
      margin-right: 15px;
    }

    .integralMall-integral-details {
      .integralMall-integral-num {
        font-size: 16px;
        color: rgba(238, 117, 89, 1);
        line-height: 1em;
      }

      .integralMall-integral-init {
        margin-top: 8px;
        font-size: 12px;
        color: rgba(160, 160, 160, 1);
        line-height: 1em;
      }
    }
  }

  .collects {
    background: #fff;
  }

  .product-list {
    font-size: 0;

    .product {
      margin-bottom: 40/2px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .scroll-view-x {
    overflow-x: auto;
  }

  .integralMall-list {
    display: flex;
    flex-wrap: wrap;


  }

  .integralMall-record {
    display: flex;
    align-items: center;

    img {
      width: 20px;
      height: 20px;
    }

    span {
      margin-left: 8px;
      font-size: 12px;
      color: rgba(160, 160, 160, 1);
    }
  }

</style>
